require('normalize.css/normalize.css');
require('styles/App.css');

import React from 'react';

// 从json中获取图片相关数据
var imageDatas = require('../data/imageData.json');
// 获得图片的URL
imageDatas = (function genImageURL(imageDatasArr){
  for(var i = 0, j = imageDatasArr.length; i < j; i ++){
    var singleImageData = imageDatasArr[i];
    singleImageData.imageURl = require('../images/' + singleImageData.fileName);
    imageDatasArr[i] = singleImageData;
  }

  return imageDatasArr;
})(imageDatas);


// 单个图片组件
class ImgFigure extends React.Component{
  render(){
    return (
      <figure className="img-figure">
        <img src={this.props.data.imageURl} alt={this.props.data.fileName}/>
        <figcaption>
          <h2 className="img-title">{this.props.data.desc}</h2>
        </figcaption>
      </figure>
    )
  }
}

class AppComponent extends React.Component{
  Constant:{
    centerPos:{
      left: 0,
      right: 0
    },
    hPosRange:{
      leftSecX:[0,0],
      rightSecX:[0,0],
      y:[0,0]
    },
    vPosRange:{
      x:[0,0],
      topY:[0,0]
    }
  }

  // 组建加载完成后，为每张图片计算其位置
  componentDidMount(){
    // 获取舞台的大小
    var stageDOM = React.findDOMNode(this.refs.stage);
    var stageH = stageDOM.scrollWidth;
    var stageW = stageDOM.scrollHeight;
    var halfStageW = Math.ceil(stageW / 2);
    var halfStageH = Math.ceil(stageH / 2);
  }

  render() {
    var imgFigures = [];
    imageDatas.forEach(function(value){
      imgFigures.push(<ImgFigure data={value} />);
    });
    return (
      <section className="stage" ref="stage">
        <section className="img-stage">
          {imgFigures}
        </section>
        <nav className="controller-nav"></nav>
      </section>
    );
  }
}

AppComponent.defaultProps = {
};

export default AppComponent;
